<template>
  <div class="app-container">
    <el-steps :active="4" class="mb-20">
      <el-step title="创建物料"></el-step>
      <el-step title="供应商设置"></el-step>
      <el-step title="招标规则"></el-step>
      <el-step title="发布招标公告"></el-step>
      <el-step title="选择参与供应商"></el-step>
      <el-step title="评议规则"></el-step>
    </el-steps>
    <el-card shadow="never" class="mb-20">
      <div slot="header" class="clearfix">
        <span>确定入围供应商</span>
        <div class="float-right">
          <el-button
            v-permission="['admin', 'bidder']"
            type="primary"
            icon="el-icon-coordinate"
            >评标规则</el-button
          >
          <el-button
            v-permission="['admin', 'bidder']"
            type="primary"
            icon="el-icon-time"
            >设置时间</el-button
          >
          <el-button
            v-permission="['admin', 'bidder']"
            type="primary"
            icon="el-icon-user"
            >评标专家</el-button
          >
          <el-button
            v-permission="['admin', 'bidder']"
            type="primary"
            icon="el-icon-setting"
            >设置开标人</el-button
          >
          <el-button
            v-permission="['admin', 'bidder']"
            type="primary"
            icon="el-icon-edit"
            >变更时间</el-button
          >

          <el-button
            type="primary"
            icon="el-icon-delete"
            @click="dialogVisible2 = true"
            >流标</el-button
          >
          <el-badge :value="12" style="margin-left: 10px">
            <el-button
              v-permission="['admin', 'bidder']"
              type="primary"
              icon="el-icon-c-scale-to-original"
              >澄清</el-button
            >
          </el-badge>
        </div>
      </div>

      <el-form :model="form" label-width="120px">
        <el-row>
          <el-col :md="8">
            <el-form-item label="活动名称：">
              {{ form.name }}
            </el-form-item>
          </el-col>
          <el-col :md="8">
            <el-form-item label="报名截止时间：">
              {{ form.end_time }}
            </el-form-item>
          </el-col>
          <el-col :md="8">
            <el-form-item label="招标编号：">
              {{ form.code }}
            </el-form-item>
          </el-col>
          <el-col :md="8">
            <el-form-item label="投标截止时间：">
              {{ form.last_time }}
            </el-form-item>
          </el-col>
          <el-col :md="8">
            <el-form-item label="采购单位：">
              {{ form.company }}
            </el-form-item>
          </el-col>
          <el-col :md="8">
            <el-form-item label="开标时间：">
              {{ form.start_time }}
            </el-form-item>
          </el-col>
          <el-col :md="8">
            <el-form-item label="招标方式：">
              {{ form.way }}
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
    </el-card>

    <el-tabs v-model="activeName">
      <el-tab-pane name="1" label="招名供应商"></el-tab-pane>
      <el-tab-pane name="2" label="邀请供应商"></el-tab-pane>
    </el-tabs>

    <el-table :data="lists" border highlight-current-row class="mb-20">
      <el-table-column
        label="序号"
        type="index"
        width="60"
        align="center"
      ></el-table-column>
      <el-table-column label="供应商名称" prop="name"></el-table-column>

      <template v-if="checkPermission(['bidder'])">
        <el-table-column label="联系人" prop="contracter"></el-table-column>
        <el-table-column label="手机号" prop="mobile"></el-table-column>
        <el-table-column label="报名时间" prop="enter_time"></el-table-column>
        <el-table-column label="审核时间" prop="examine_time"></el-table-column>
        <el-table-column
          v-if="activeName == 1"
          label="状态"
          prop="status"
        ></el-table-column>
      </template>
      <template v-else>
        <el-table-column label="供应商类型" prop="type"></el-table-column>
        <el-table-column
          label="合作次数"
          prop="cooperation_count"
        ></el-table-column>
        <el-table-column
          label="合作金额（万元）"
          prop="cooperation_cash"
        ></el-table-column>
        <el-table-column label="综合等级" prop="grade"></el-table-column>
        <el-table-column label="企业风险">
          <template>
            <el-button type="text">查看</el-button>
          </template>
        </el-table-column>
        <el-table-column
          label="是否有合作"
          prop="is_cooperation"
        ></el-table-column>
        <el-table-column label="省份市" prop="address"></el-table-column>
        <el-table-column label="操作">
          <el-button type="text" @click="dialogVisible1 = true"
            >选择参与
          </el-button>
        </el-table-column>
      </template>
    </el-table>
    <div class="text-center">
      <el-button type="primary" @click="dialogVisible = true"
        >提交审核</el-button
      >
      <el-button type="default" @click="$router.go(-1)">关闭</el-button>
    </div>

    <el-dialog title="确定审批" :visible.sync="dialogVisible" width="400px">
      <el-form :model="dialogForm" label-width="100px">
        <el-form-item label="询单编号">XJD-998376241</el-form-item>
        <el-form-item label="询单标题">招标名称</el-form-item>
        <el-form-item label="是否OA审批">
          <el-radio-group v-model="OaRadio">
            <el-radio :label="1">是</el-radio>
            <el-radio :label="2">否</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="选择审批流">
          <el-select v-model="dialogForm.value">
            <el-option label="无审批流" value="0"></el-option>
            <el-option label="一级审批流" value="1"></el-option>
            <el-option label="二级审批流" value="2"></el-option>
          </el-select>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="submitForm">确 定</el-button>
      </span>
    </el-dialog>

    <el-dialog title="选择入围" :visible.sync="dialogVisible1" width="400px">
      <el-form :model="dialogForm1" label-width="80px">
        <el-form-item label="选择入围" required>
          <el-radio-group v-model="dialogForm1.radio">
            <el-radio :label="1">已入围</el-radio>
            <el-radio :label="2">未入围</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="原因">
          <el-input type="textarea" v-model="dialogForm1.reason"></el-input>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible1 = false">取 消</el-button>
        <el-button type="primary" @click="dialogVisible1 = false"
          >确 定</el-button
        >
      </span>
    </el-dialog>
    <el-dialog title="流标" :visible.sync="dialogVisible2" width="400px">
      <el-form :model="dialogForm1" label-width="80px">
        <el-form-item label="流标原因">
          <el-input type="textarea" v-model="dialogForm2.reason"></el-input>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible2 = false">取 消</el-button>
        <el-button type="primary" @click="dialogVisible2 = false"
          >确 定</el-button
        >
      </span>
    </el-dialog>
  </div>
</template>

<script>
export default {
  data() {
    return {
      OaRadio: 2,
      dialogVisible: false,
      dialogForm: {
        value: "0",
      },
      dialogVisible1: false,
      dialogForm1: {
        radio: 1,
        reason: "",
      },
      dialogVisible2: false,
      dialogForm2: {
        reason: "",
      },
      form: {
        name: "招标名称",
        end_time: "2020-03-01  14:59:59",
        code: "XJD-998376241",
        last_time: "--",
        company: "北京国电龙源环保工程有限公司",
        start_time: "--",
        way: "公开招标",
      },
      activeName: "1",
      lists: [
        {
          name: "供应商名称1",
          type: "制造商",
          cooperation_count: 5,
          cooperation_cash: "1200.00",
          grade: "A",
          is_contract: "有",
          address: "天津市东丽区",
          contracter: "联系人1",
          mobile: "12345678951",
          enter_time: "2020-12-12",
          examine_time: "2020-12-30",
          status: "已报名",
        },
        {
          name: "供应商名称2",
          type: "代理商",
          cooperation_count: 8,
          cooperation_cash: "8200.00",
          grade: "A",
          is_contract: "有",
          address: "天津市东丽区",
          contracter: "联系人1",
          mobile: "12345678951",
          enter_time: "2020-12-12",
          examine_time: "2020-12-30",
          status: "已入围",
        },
        {
          name: "供应商名称3",
          type: "代理商",
          cooperation_count: 28,
          cooperation_cash: "18200.00",
          grade: "A",
          is_contract: "有",
          address: "天津市东丽区",
          contracter: "联系人1",
          mobile: "12345678951",
          enter_time: "2020-12-12",
          examine_time: "2020-12-30",
          status: "未入围",
        },
      ],
    };
  },
  methods: {
    submitForm() {
      this.dialogVisible = false;
      this.$router.go(-1);
    },
  },
};
</script>

<style lang="scss" scoped></style>
